<template>
  <div id="Seckill">
    <!-- 头部栏位 -->
    <!--页面顶部-->
    <div id="nav-bottom">
      <!--顶部-->
      <div class="nav-top">
        <div class="top">
          <div class="py-container">
            <div class="shortcut">
              <ul class="fl">
                <li class="f-item">青橙欢迎您！</li>
                <li class="f-item">
                  请
                  <a href="login.html" target="_blank">登录</a>
                  <span>
                    <a href="register.html" target="_blank">免费注册</a>
                  </span>
                </li>
              </ul>
              <div class="fr typelist">
                <ul class="types">
                  <li class="f-item">
                    <span>我的订单</span>
                  </li>

                  <li class="f-item">
                    <span>
                      <a href="javascript:;" @click="$router.push('/cart')" >我的购物车</a>
                    </span>
                  </li>
                  <li class="f-item">
                    <span>
                      <a href="home.html" target="_blank">我的青橙</a>
                    </span>
                  </li>
                  <li class="f-item">
                    <span>青橙会员</span>
                  </li>
                  <li class="f-item">
                    <span>企业采购</span>
                  </li>
                  <li class="f-item">
                    <span>关注青橙</span>
                  </li>
                  <li class="f-item">
                    <span>
                      <a href="cooperation.html" target="_blank">合作招商</a>
                    </span>
                  </li>
                  <li class="f-item">
                    <span>
                      <a href="shoplogin.html" target="_blank">商家后台</a>
                    </span>
                  </li>
                  <li class="f-item">
                    <span>网站导航</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!--头部-->
        <div class="header">
          <div class="py-container">
            <div class="yui3-g Logo">
              <div class="yui3-u Left logoArea">
                <a
                  class="logo-bd"
                  title="青橙"
                  href="javascript:;"
                  @click="$router.push('/home')"
                ></a>
              </div>
              <div class="yui3-u Rit searchArea">
                <div class="search">
                  <form action="" class="sui-form form-inline">
                    <!--searchAutoComplete-->
                    <div class="input-append">
                      <input
                        type="text"
                        id="autocomplete"
                        class="input-error input-xxlarge"
                      />
                      <button
                        class="sui-btn btn-xlarge btn-danger"
                        type="button"
                      >
                        搜索
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="py-container index">
      <!--banner-->
      <div class="banner">
        <img src="img/_/banner.png" class="img-responsive" alt="" />
      </div>
      <!--秒杀时间-->
      <div class="sectime">
        <div class="item-time active">
          <div class="time-clock">12:00</div>
          <div class="time-state-on">
            <span class="on-text">快抢中</span>
            <span class="on-over">距离结束：01:02:34</span>
          </div>
        </div>
        <div class="item-time">
          <div class="time-clock">14:00</div>
          <div class="time-state-will">
            <span>即将开始</span>
          </div>
        </div>
        <div class="item-time">
          <div class="time-clock">16:00</div>
          <div class="time-state-will">
            <span>即将开始</span>
          </div>
        </div>
        <div class="item-time">
          <div class="time-clock">18:00</div>
          <div class="time-state-will">
            <span>即将开始</span>
          </div>
        </div>
        <div class="item-time">
          <div class="time-clock">20:00</div>
          <div class="time-state-will">
            <span>即将开始</span>
          </div>
        </div>
      </div>
      <!--商品列表-->
      <div class="goods-list" id="app">
        <ul class="seckill" id="seckill">
          <li class="seckill-item" v-for="item in goodslist" :key="item">
            <div class="pic">
              <img src="img/_/list.jpg" alt="" />
            </div>
            <div class="intro">
              <span>{{ item.intro }}</span>
            </div>
            <div class="price">
              <b class="sec-price">￥{{ item.newprice }}</b>
              <b class="ever-price">￥{{ item.oldprice }}</b>
            </div>
            <div class="num">
              <div>已售{{ item.rate }}</div>
              <div class="progress">
                <div class="sui-progress progress-danger">
                  <span style="width: 70%;" class="bar"></span>
                </div>
              </div>
              <div>
                剩余 <b class="owned">{{ item.left }}</b
                >件
              </div>
            </div>
            <a
              class="sui-btn btn-block btn-buy"
              href="javascript:;"
              @click="$router.push('/details')"
              >立即抢购</a
            >
          </li>
        </ul>
      </div>
      <div class="cd-top">
        <div class="top">
          <img src="img/_/gotop.png" />
          <b>TOP</b>
        </div>
        <div class="code" id="code">
          <span>
            <img src="img/_/code.png" />
          </span>
        </div>
        <div class="erweima">
          <img src="img/_/erweima.jpg" alt="" />
          <s></s>
        </div>
      </div>
    </div>

    <!--回到顶部-->

    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer">
      <div class="py-container">
        <div class="footlink">
          <div class="Mod-service">
            <ul class="Mod-Service-list">
              <li class="grid-service-item intro  intro1">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item  intro intro2">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item intro  intro3">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item  intro intro4">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
              <li class="grid-service-item intro intro5">
                <i class="serivce-item fl"></i>
                <div class="service-text">
                  <h4>正品保障</h4>
                  <p>正品保障，提供发票</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="clearfix Mod-list">
            <div class="yui3-g">
              <div class="yui3-u-1-6">
                <h4>购物指南</h4>
                <ul class="unstyled">
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>生活旅行/团购</li>
                  <li>常见问题</li>
                  <li>购物指南</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>配送方式</h4>
                <ul class="unstyled">
                  <li>上门自提</li>
                  <li>211限时达</li>
                  <li>配送服务查询</li>
                  <li>配送费收取标准</li>
                  <li>海外配送</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>支付方式</h4>
                <ul class="unstyled">
                  <li>货到付款</li>
                  <li>在线支付</li>
                  <li>分期付款</li>
                  <li>邮局汇款</li>
                  <li>公司转账</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>售后服务</h4>
                <ul class="unstyled">
                  <li>售后政策</li>
                  <li>价格保护</li>
                  <li>退款说明</li>
                  <li>返修/退换货</li>
                  <li>取消订单</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>特色服务</h4>
                <ul class="unstyled">
                  <li>夺宝岛</li>
                  <li>DIY装机</li>
                  <li>延保服务</li>
                  <li>品优购E卡</li>
                  <li>品优购通信</li>
                </ul>
              </div>
              <div class="yui3-u-1-6">
                <h4>帮助中心</h4>
                <img src="img/wx_cz.jpg" />
              </div>
            </div>
          </div>
          <div class="Mod-copyright">
            <ul class="helpLink">
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                联系我们
                <span class="space"></span>
              </li>
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                商家入驻
                <span class="space"></span>
              </li>
              <li>
                营销中心
                <span class="space"></span>
              </li>
              <li>
                友情链接
                <span class="space"></span>
              </li>
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                营销中心
                <span class="space"></span>
              </li>
              <li>
                友情链接
                <span class="space"></span>
              </li>
              <li>关于我们</li>
            </ul>
            <p>
              地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
              电话：400-618-4000 传真：010-82935100
            </p>
            <p>京ICP备08001421号京公网安备110108007702</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Seckill',
  data() {
    return {
      goodslist: [
        {
          intro: 'Apple苹果iPhone 6s 32G金色 移动联通电信4G手机',
          newprice: '6088',
          oldprice: '6988',
          rate: '87%',
          left: '29'
        },
        {
          intro: 'Apple苹果iPhone 6s 32G金色 移动联通电信4G手机',
          newprice: '6088',
          oldprice: '6988',
          rate: '87%',
          left: '29'
        },
        {
          intro: 'Apple苹果iPhone 6s 32G金色 移动联通电信4G手机',
          newprice: '6088',
          oldprice: '6988',
          rate: '87%',
          left: '29'
        },
        {
          intro: 'Apple苹果iPhone 6s 32G金色 移动联通电信4G手机',
          newprice: '6088',
          oldprice: '6988',
          rate: '87%',
          left: '29'
        },
        {
          intro: 'Apple苹果iPhone6 s 32 G金色 移动联通电信4G手机 ',
          newprice: '6088 ',
          oldprice: '6988 ',
          rate: '87 % ',
          left: '29 '
        },
        {
          intro: 'Apple苹果iPhone 6 s 32 G金色 移动联通电信4G手机 ',
          newprice: '6088',
          oldprice: '6988',
          rate: '87%',
          left: '29'
        },
        {
          intro: 'Apple苹果iPhone 6s 32G金色 移动联通电信4G手机',
          newprice: '6088',
          oldprice: '6988',
          rate: '87%',
          left: '29'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
#Seckill {
  .row-405 {
    width: 405px;
  }
  .row-225 {
    width: 225px;
  }
  .row-165 {
    width: 165px;
  }
  .row-330 {
    width: 330px;
  }
  .row-220 {
    width: 220px;
  }
  .row-218 {
    width: 218px;
  }
  a {
    color: #666;
  }
  .index .sectime .item-time {
    float: left;
    vertical-align: middle;
    margin-left: 2.5px;
    padding: 10px 0;
    width: 238px;
    height: 40px;
    line-height: 40px;
    *line-height: 42px;
    _line-height: 42px;
    color: #fff;
    background-color: #4e4e4e;
  }
  .index .sectime .item-time.active {
    line-height: 21px;
    background: #ff713f;
  }
  .index .sectime .item-time:first-child {
    margin-left: 0;
  }
  .index .sectime .item-time div {
    overflow: hidden;
    *float: left;
    vertical-align: middle;
  }
  .index .sectime .item-time.active .time-clock {
    *padding-top: 10px;
    _padding-top: 10px;
    *line-height: 20px;
    _line-height: 20px;
  }
  .index .sectime .item-time .time-clock {
    float: left;
    padding-left: 25px;
    padding-right: 10px;
    line-height: 40px;
    font-size: 18px;
    font-weight: 700;
  }
  .index .sectime .item-time .time-state-on span {
    display: block;
  }
  .index .sectime .item-time .time-state-on .on-text {
    font-size: 14px;
  }
  .index .sectime .item-time .time-state-on .on-over {
    font-size: 12px;
  }
  .index .sectime .item-time .time-state-will span {
    padding: 4px 10px;
    *padding-top: 0;
    _padding-top: 0;
    border: 1px solid #9e9e9e;
    border-radius: 10px;
    color: #9e9e9e;
  }
  .goods-list {
    margin-bottom: 30px;
  }
  .goods-list ul.seckill {
    margin-left: -10px;
  }
  .goods-list ul li {
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
    width: 287px;
    line-height: 26px;
    list-style-type: none;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .border {
    border-color: #555;
  }
  .goods-list ul li.border {
    border: 1px solid #b1191a;
  }
  .goods-list .seckill-item .intro {
    padding: 0 10px;
    font-size: 14px;
    color: #666;
  }
  .goods-list .seckill-item .price {
    padding: 0 10px;
  }
  .goods-list .seckill-item .price .sec-price {
    font-size: 22px;
    color: #e60012;
  }
  .goods-list .seckill-item .price .ever-price {
    font-size: 14px;
    color: #a4a4a4;
    text-decoration: line-through;
  }
  .goods-list .seckill-item .num {
    padding: 0 10px;
  }
  .goods-list .seckill-item .num div {
    display: inline-block;
  }
  .goods-list .seckill-item .num .progress {
    width: 55%;
    margin: 0 5px;
  }
  .goods-list .seckill-item .num .sui-progress {
    margin-bottom: 0;
    width: 100%;
    height: 12px;
  }
  .progress-danger .bar {
    background-color: #ed282e;
  }
  .goods-list .seckill-item .num .owned {
    font-size: 16px;
    color: #e12228;
  }
  .goods-list li.seckill-item .btn-buy {
    padding: 15px 0;
    margin-top: 10px;
    font-size: 20px;
    border: 0;
    border-radius: 0;
    background-color: #ff713f;
    color: #fff;
  }
  .cd-top {
    position: fixed;
    right: 0;
    bottom: 25%;
    z-index: 100;
    text-align: center;
    color: #fff;
    background-color: #ff713f;
  }
  .cd-top .top {
    padding: 5px;
    background-color: #ff713f;
    cursor: pointer;
  }
  .top b {
    display: block;
    margin-top: -5px;
    color: #fff;
    font-size: 16px;
    line-height: 26px;
  }
  .cd-top .code {
    border-top: 1px solid #fff;
    padding: 10px 20px;
    cursor: pointer;
  }
  .cd-top .erweima {
    display: none;
    position: fixed;
    right: 17.5%;
    z-index: 200;
    bottom: 19%;
    border: 2px solid #b1191a;
  }
  .cd-top .erweima s {
    position: absolute;
    right: -15px;
    top: 39%;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent transparent #b1191a;
    z-index: 4;
  }
}
</style>
